<template>
     <div class="manage1">
        <el-form :inline="true" class="manage1_from1">
         <el-form-item label=""></el-form-item>
           <el-form-item label="手机号：">
               <el-input v-model="param.mobile" placeholder="手机号" clearable class="manage1_from1_input1" />
           </el-form-item>


           <el-form-item label="协会名称：">
               <el-input v-model="param.associationName" placeholder="协会名称" clearable class="manage1_from1_input1" />
           </el-form-item>
           <el-form-item label="城市：">
               <el-input v-model="param.city" placeholder="城市" clearable class="manage1_from1_input1" />
           </el-form-item>

           <!-- <el-form-item label="注册时间：">
               <el-input v-model="param.createTime" placeholder="注册时间" clearable class="manage1_from1_input1" />
           </el-form-item> -->


           <!-- <el-form-item label="状态：">
               <el-select v-model="param.status" @change="schoolCge" placeholder="审核中,已通过,已拒绝" clearable
                          class="manage1_from1_select1">
                    <el-option key="1" label="审核中" value="1" />
                    <el-option key="2" label="已通过" value="2" />
                    <el-option key="3" label="已拒绝" value="3" />
               </el-select>
           </el-form-item> -->


            <el-form-item>
                <el-button type="primary" class="manage1_from1_button1" @click="getList(1)">搜索</el-button>
                <el-button @click="rewrite" text type="primary">
                    <el-icon :size="16">
                        <refresh />
                    </el-icon> &nbsp;重置筛选条件
                </el-button>
            </el-form-item>
        </el-form>
    </div>
    <el-tabs v-model="param.tablestatus" class="tab1" @tab-change="getList(1)">
        <el-tab-pane label="待审核" :name="1"> </el-tab-pane>


        <el-tab-pane label="已通过" :name="2"> </el-tab-pane>


    </el-tabs>
    <div class="list1" v-if="param.tablestatus ==1" v-loading="loading">

        <el-table ref="selectTable" :data="list1">
                            <el-table-column prop="userId" min-width="120" label="id"></el-table-column>

                            <el-table-column prop="mobile" min-width="120" label="手机号"></el-table-column>

                            <el-table-column prop="associationName" min-width="120" label="协会名称"></el-table-column>
                            <el-table-column prop="city" min-width="120" label="城市"></el-table-column>

                             <el-table-column prop="ballSeed" min-width="120" label="球种"></el-table-column>      
                            <el-table-column min-width="80" label="状态" >
                                <template #default="scope">
                                    {{status[scope.row.status]}}
                                </template>
                            </el-table-column>

                            <el-table-column prop="createTime" min-width="120" label="注册时间"></el-table-column>

            <el-table-column fixed="right" label="操作" min-width="200">
                <template #default="scope">
                    <div class="list1_operate1">
                      <el-button @click="tanchuang400lab0(scope.row,2)"  text type="primary">通过</el-button>
                      <el-divider class="list1_operate1_line1" direction="vertical" />
                      <el-button @click="tanchuang400lab1(scope.row,4)"  text type="primary">拒绝</el-button>
                      <el-divider class="list1_operate1_line1" direction="vertical" />
                       <el-button @click="$router.push('/xiehuixiangqing/'+scope.row.userId)" text type="primary">详情</el-button>
                       <el-divider class="list1_operate1_line1" direction="vertical" />
                    </div>
                </template>
            </el-table-column>
        </el-table>


        <div class="list1_page1">
            <p class="list1_page1_title1">共 {{ total }} 条</p>
            <el-pagination v-model:currentPage="param.pageNumber" @size-change="handleSizeChange"
                           @current-change="handleCurrentChange" :page-sizes="[10, 15, 20, 25]" :page-size="param.pageSize"
                           layout=" sizes, prev , jumper , next" :total="total">
            </el-pagination>
        </div>
    </div>


    <div class="list1" v-if="param.tablestatus ==2" v-loading="loading">

        <el-table ref="selectTable" :data="list2">
                            <el-table-column prop="userId" min-width="120" label="id"></el-table-column>

                            <el-table-column prop="mobile" min-width="120" label="手机号"></el-table-column>

                            <el-table-column prop="associationName" min-width="120" label="协会名称"></el-table-column>
                            <el-table-column prop="city" min-width="120" label="城市"></el-table-column>

                             <el-table-column prop="ballSeed" min-width="120" label="球种"></el-table-column>      
                            <el-table-column min-width="80" label="状态" >
                                <template #default="scope">
                                    {{status[scope.row.status]}}
                                </template>
                            </el-table-column>

                            <el-table-column prop="createTime" min-width="120" label="注册时间"></el-table-column>

            <el-table-column fixed="right" label="操作" min-width="200">
                <template #default="scope">
                    <div class="list1_operate1">
                       <el-button @click="$router.push('/xiehuixiangqing/'+scope.row.userId)" text type="primary">详情</el-button>
                       <el-divider class="list1_operate1_line1" direction="vertical" />
                       <!-- <el-button @click="tanchuang1(scope.row,3)"  text type="primary">删除</el-button>
                      <el-divider class="list1_operate1_line1" direction="vertical" /> -->
                    </div>
                </template>
            </el-table-column>
        </el-table>


        <div class="list1_page1">
            <p class="list1_page1_title1">共 {{ total }} 条</p>
            <el-pagination v-model:currentPage="param.pageNumber" @size-change="handleSizeChange"
                           @current-change="handleCurrentChange" :page-sizes="[10, 15, 20, 25]" :page-size="param.pageSize"
                           layout=" sizes, prev , jumper , next" :total="total">
            </el-pagination>
        </div>
    </div>




</template>
<script>
    
export default {
    data() {
        return {
            param:{},
            list1:[],
            list2:[],

            param: {
                pageNumber: 1,
                pageSize: 10,
                tablestatus: 1,
            },            
            loading: false,
            total: 0,
            status:{1:'信息填写完成未支付',2:'已认证',3:'审核中',4:'审核失败'},
        }
    },

    created() {
    this.getList()
    },

    mounted() {
    },

    components: {
    },

    methods: {
        rewrite() {
            let that = this;
            let obj = {
                pageNumber: that.param.pageNumber,
                pageSize: that.param.pageSize,
                tablestatus: that.param.tablestatus
            }
            that.param = obj;
        },


       tanchuang400lab0(val,status){
            let that = this;
            this.$msgbox.confirm(
            " ",
            "你确认通过",
            {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            }
            ).then(() => {
             this.$api.audit({authenticationId:val.authenticationId,status:status}).then(res => {
                 console.log(res);
                 if(res){
                     that.getList();
                    that.$message.success(res.message);
                 }
             })
            }).catch(() => {});
        },


       tanchuang400lab1(val,status){
            let that = this;
            this.$msgbox.confirm(
            " ",
            "你确认拒绝",
            {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            }
            ).then(() => {
             this.$api.audit({authenticationId:val.authenticationId,status:status}).then(res => {
                 console.log(res);
                 if(res){
                     that.getList();
                    that.$message.success(res.message);
                 }
             })
            }).catch(() => {});
        },

        handleSizeChange(val) {
            console.log(`每页 ${val} 条`);
            this.param.pageSize = val;
            this.getList();
        },
        handleCurrentChange(val) {
            console.log(`当前页: ${val}`);
            this.param.pageNumber = val;
            this.getList();
        },
        tanchuang1(val,status){
            let that = this;
            this.$msgbox.confirm(
            " ",
            "你确认要删除吗",
            {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            }
            ).then(() => {
             this.$api.delluser({userId:val.userId,status:status}).then(res => {
                 console.log(res);
                 if(res){
                     that.getList();
                    that.$message.success(res.message);
                 }
             })
            }).catch(() => {});
        },
    async getList(pageNumber) {
        this.loading = true;
        let res;
        if (pageNumber) {
           this.param.pageNumber = pageNumber;

        }
        if(this.param.tablestatus==1){
            this.param.status = 3;
            this.param.identity = 3;
           res =await this.$api.balluserlist(this.param);
        }
        if(this.param.tablestatus==2){
            this.param.status = 2;
            this.param.identity = 3;
            this.param.types = 2;
           res =await this.$api.balluserlist(this.param);
        }
        console.log('res====', res)
        if (res) {
            let url = 'list'+this.param.tablestatus
            this[url] = res.records
            this.total = res.total;
        }
        this.loading = false;
    },


    }

}


</script>
<style lang="scss" scoped>
.manage1{
    padding: 10px 20px 10px;
    background-color: #fff;
    text-align: left;
    .manage1_from1{
        background: #F2F3F5;
        padding: 24px 16px 4px;
        text-align: left;
        .manage1_from1_input1{width: 250px}
        .manage1_from1_input2{width: 110px;margin-right: 10px;}
        .manage1_from1_input3{width: 110px;margin-left: 10px;}
        .manage1_from1_select1{width: 250px}
        .manage1_from1_time1{width: 110px}
        .manage1_from1_button1{width: 115px;}
    }

}
.tab1{
    background-color: #fff;
    margin-top: 10px;
}
.list1{
    background-color: #fff;
    .list1_head1{
        width: 40px;height: 40px;
        border-radius: 50%;
    }
    .list1_operate1{
        width: 100%;
        display: flex;
        justify-content: center;
        .list1_operate1_line1{margin: auto 10px;}
    }
    .list1_page1{
        height: 70px;
        padding: 20px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .list1_page1_title1{
            font-size: 10px;color: #A4A4A4;
        }
    }
}

</style>